<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<title></title>
</head>
<body>
<div id="app">
	<template v-for="good in group">
		<el-input-number v-model='good.num' :min="1" :max="10"></el-input-number></br>
		<!-- @change="addTotal()" -->
		<!-- :min="1" :max="10"></el-input-number> -->
	</template>
	<p>总数：{{group.reduce((t,c)=>t+c.num,0)}}</p>
	<!-- <p>总数：{{total}}</p> -->
</div>
<script>
	new Vue({
		el:"#app",
		data:{
			group:[
				{num:1},
				{num:2},
				{num:3}
			],
			// total:0
		},
		// //处理数据之前
		// created() {
		// 	this.addTotal();
		// },
		// methods:{
		// 	addTotal:function(){
		// 		this.total=this.group.reduce((t,c)=>t+c.num,0);
				
		// 	}
		// }
	})
	
</script>
</body>
</html>
